<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>重定向</title>
  </head>
  <body>
    <!-- 
      场景：不使用vue-link也想使用路由跳转
      知识点：
          1.$router是路由对象，而$route是路由配置对象
          2.在 Vue 实例内部，你可以通过 $router 访问路由实例
          3.$router.push()，这个方法会向 history 栈添加一个新的记录。
          所以，当用户点击浏览器后退按钮时，则回到之前的 URL
          4.当你点击 <router-link> 时，这个方法会在内部调用。
          所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。   
          5.$router.replace()  跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，
          而是跟它的方法名一样 —— 替换掉当前的 history 记录
        
    -->
    <div id="app">
      <router-link to="home">主页</router-link>
      <router-link to="user">用户管理</router-link>
      <router-link to="sys">设置</router-link>

      <!-- 通过按钮或a标签实现路由跳转 -->
      <button @click="changeURL()">点击跳转到用户管理页面</button>
      <button @click="replaceURL()">点击跳转到用户管理页面(不支持回退)</button>
      <router-view></router-view>
    </div>
  </body>
  <script src="../assets/vue.js"></script>
  <script src="../assets/vue-router.js"></script>

  <script>
    var comHome = {
      template: `<div> 这是主页内容</div>`,
    };
    var comUser = {
      template: `<div> 这是用户管理内容</div>`,
    };
    var comSys = {
      template: `<div> 这是设置内容</div>`,
    };

    var routes = [
      // 当访问根Url '/'时，跳转到首页
      {
        path: "/",
        redirect: {
          name: "home",
        },
      },
      { path: "/home", name: "home", component: comHome },
      { path: "/user", component: comUser },
      { path: "/sys", component: comSys },
      // 当访问任意URL时，跳转到首页
      {
        path: "*",
        redirect: {
          path: "/home",
        },
      },
    ];

    const router = new VueRouter({
      routes,
    });
    new Vue({
      el: "#app",
      data: {},
      methods: {
        changeURL() {
          this.$router.push("/user"); // 点击浏览器后退按钮时，则回到之前的 URL。
          // 作用同上：如果提供了 path，params 会被忽略
          // this.$router.push({ path: "/user" });
        },
        replaceURL() {
          // 点击浏览器后退按钮时，也会回到之前的 URL，但是它不会向 history 添加新记录
          this.$router.replace("/user");
        },
      },
      router,
    });
  </script>
</html>
